<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<meta http-equiv="content-type" content="text/html;charset=UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<title>乐鲜生活-门店地图</title>
	<link rel="shortcut icon" href="favicon.ico" />
	<link rel="bookmark" href="favicon.ico" />
	<link rel="stylesheet" type="text/css" href="css/base.css" />
	<link rel="stylesheet" type="text/css" href="css/map.css" />
	<link rel="stylesheet" type="text/css" href="css/asyncbox/asyncbox.css" />
</head>
<body>
	<div id="wrapper">
		<div id="header"></div>
		<div class="header distance_top">
			<!--头部-->
			<div class="column_z">
				<ul>
					<li class="fist_li_z">查看门店地址</li>
					<li class="com_li com_li_color"><a href="index.html" class="icon_z_1">首页</a></li>
				</ul>
				<div class="clr"></div>
			</div>
		</div>
		<div class="miansection">
			<div class="left1_1">
				<div class="left_one_z" id="a">
					<div class="margin_top">
						<span>所在省：</span>
						<select id="province" class="commoBox" data-option='{"url":"/store/findArea.do?clazz=1","key":"data","textField":"city","valueField":"id","code":"postcode","child":"#citys"}'>
							<option value="0">请选择</option>
						</select>
					</div>
					<div>
						<span>所在市： </span>
						<select id="citys" data-option='{"url":"/store/findArea.do?clazz=2","key":"data","textField":"city","valueField":"id","child":"#areas","code":"postcode","parentKey":"parentId"}'>
							<option value="0">请选择</option>
						</select>
					</div>
					<div>
						<span>所在区： </span>
						<select id="areas" data-option='{"url":"/store/findArea.do?clazz=3","key":"data","textField":"city","valueField":"id","child":"#store","code":"postcode","parentKey":"parentId"}'
							onchange="msg();">
							<option value="0">请选择</option>
						</select>
					</div>
					<div>
						<span>门&nbsp;&nbsp;&nbsp;&nbsp;店：</span>
						<select id="store" data-option='{"url":"/store/getLocation.do?type=4&","key":"data","textField":"storeName","valueField":"storeNo","parentKey":"id"}'
							onchange="findStoreNo();">
							<option value="0">请选择</option>
						</select>
					</div>
				</div>
			</div>
			<div class="right1_1">
				<div id="dituContent"></div>
			</div>
			<div class="clr"></div>
		</div>
		<div id="footer"></div>
	</div>
	<script type="text/javascript" src="js/site/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="js/site/AsyncBox.v1.4.js"></script>
	<script type="text/javascript" src="js/site/common.js"></script>
	<script type="text/javascript" src="js/site/String.js"></script>
	<script type="text/javascript" src="js/site/validate.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?ak=ExHmGckNEQDM4KLjeDqbLxgF&v=2.0"></script>
	<script type="text/javascript">
		// 在百度地图容器中创建一个地图
		var map = new BMap.Map("dituContent");
		// 定义一个中心点坐标
		var point = new BMap.Point(116.282225, 39.916886);
	
		// 创建地图函数
		function createMap() {
			map.addControl(new BMap.MapTypeControl({
				mapTypes : [ BMAP_NORMAL_MAP ] // 只显示地图
			}));
			var geolocation = new BMap.Geolocation();
			geolocation.getCurrentPosition(function(r) {
				if (this.getStatus() == BMAP_STATUS_SUCCESS) {
					var mk = new BMap.Marker(r.point);
					map.addOverlay(mk);
					map.panTo(r.point);
				} else {
					alert('failed' + this.getStatus());
				}
			}, {
				enableHighAccuracy : true
			})
			window.map = map;//将map变量存储在全局
		}
	
		$(function() {
			// 设定地图的中心点和坐标并将地图显示在地图容器中
			map.centerAndZoom(point, 12);
			map.enableScrollWheelZoom(true);
			// 创建和初始化地图
			function initMap() {
				createMap();
			}
		})
	
		function remove_overlay() {
			map.clearOverlays();
		}
		
		function click_mag(a, b) {
			map.centerAndZoom(new BMap.Point(a, b), 20);
		}
	
		// 查找门店
		function findStoreNo() {
			var store = $("#store>option:selected").val();
			$.postAjax("/store/getStoreInfoByStoreNo.do", {
				storeNo : store
			}, function(json) {
				if (json.code) {
					asyncbox.tips(json.message, asyncbox.Level.error);
					return;
				}
				var data = json.data || {};
				var latitude = (data.maxLatitude + data.minLatitude) / 2.0;
				var longitude = (data.maxLongitude + data.minLongitude) / 2.0
				map.centerAndZoom(new BMap.Point(longitude, latitude), 14);
			}, function() {
			});
		}
	
		function msg() {
			var areas = $.trim($("#areas>option:selected").text());
			map.centerAndZoom(areas, 12);
			var id = $.trim($("#areas>option:selected").val());
			$.postAjax("/store/getLocation.do", {
				type : 4,
				id : id
			}, function(json) {
				remove_overlay();
				if (json.code) {
					asyncbox.tips(json.message, asyncbox.Level.error);
					return;
				}
				var stores = json.data || [];
				stores.forEach(function(store){
					var latitude = (store.maxLatitude + store.minLatitude) / 2.0;
					var longitude = (store.maxLongitude + store.minLongitude) / 2.0
					var marker = new BMap.Marker(new BMap.Point(longitude, latitude));
					map.addOverlay(marker);
					marker.setLabel(new BMap.Label(store.storeName, {offset: new BMap.Size(20, -10)}));
				});
			}, function() {
				asyncbox.tips("网络连接错误！", asyncbox.Level.error);
			})
		}
	</script>
</body>
</html>